<template>
  <div  style="width: 100%;height: calc(100vh - 84px)">
    <div class="switch">
      <div style="margin-right: 20px">开启实时数据</div>
      <el-switch v-model="switchV"></el-switch>
    </div>
     <div class="dataBox">
       <div class="item" v-for="item in dataList" :key="item.p">
        <echartsItem :list="item.data" :name="item.name"/>
       </div>
     </div>
  </div>
</template>
<script>
import {list} from  "@/api/IOT/index"
import echartsItem from "./components/echartsItem.vue"
export default {
  components:{
    echartsItem
  },
  watch:{
    switchV(val){
      // console.log("改变")
      if (val){
        this.$message({
          message:"开启实时数据",
          type:"success"
        })
        this.timer = setInterval(()=>{

          this.getData()
        },1000)
      }else {
        clearInterval(this.timer)
        this.$message({
          message:"关闭实时数据",
          type:"success"
        })
      }
    }
  },
  name: "Druid",
  data() {
    return {
      switchV:false,
      timer:null,
      dataList:[
        {
        name:"湿度值",
        p:"H",
        data:[]
      },
        {
          name:"温度值",
          p:"T",
          data:[]
        },
        {
          name:"光照值",
          p:"L",
          data:[]
        },
        {
          name:"二氧化碳浓度",
          p:"Co2",
          data:[]
        },
        {
          name:"土壤湿度值",
          p:"Soil",
          data:[]
        },


      ]
    };
  },
  mounted() {
    this.getData()
  },
  methods:{
    async getData(){
      let q = []
      this.dataList.map(item=>{
       q.push( list({
         p:item.p,
         page:1,
         pageSize:20
       }))
      })
      await Promise.all(q).then(res=>{
        // console.log(res)
        res.map((item,index)=>{
          this.dataList[index].data = item.data
        })
      })
    }
  }
};
</script>
<style scoped lang="scss">
  .dataBox {
    width: 100%;
    height: 100%;
    //background: red;
    display: grid;
    grid-template-columns: repeat(2,40%);
    overflow-y: scroll;
    padding: 30px;
    grid-gap: 5%;
    .item {
      height: 300px;
      border: 1px solid #333;
    }
  }
.switch {
  display: flex;
  margin-left: 20px;
  margin-top: 20px;
}
</style>
